<template>
	<div class="v-pay">
		<div class="order-total-top">
			<div class="order-total-top-total">
				<div class="order-total-label">
          {{$t('message.totalPrice')}}：
				</div>
				<div class="order-total-price">
          {{ $t('message.currencySymbol') }}
					{{ payVal }}
				</div>
			</div>
			<div class="order-total-top-freight">
				<div class="order-total-label">
					{{$t('message.freight')}}：
				</div>
				<div class="order-total-price">
          {{ $t('message.currencySymbol') }} 0.00
				</div>
			</div>
      <div class="order-total-top-freight">
        <div class="order-total-label promotion-code" @click="showInput2">
          <i class="icon-arrow-down" :class="{'hover' : showInput}" v-if="this.$route.name === 'buy'"></i>
          {{$t('message.promotionCode')}}：
        </div>
        <div class="order-total-price">
          -{{ $t('message.currencySymbol') }} {{markdown}}
        </div>
      </div>
      <div class="order-total-top-freight" v-show="showInput">
        <!--<input type="text" v-model="code" :placeholder="$t('message.promotionCodeHolder')">
        <span class="getBtn" @click="check">{{$t('message.exchange')}}</span>
        <div class="clear"></div>
        <div class="tips" v-if="showTips">{{tips}}</div>-->
        <div class="radio-wrap" v-if="isHasDiscounts === 2">
          <v-radio :role-list="discounts" @choose-radio="getChooseRadio"></v-radio>
        </div>
        <div class="tip-wrap" v-if="isHasDiscounts === 1">
          <!--<p>无优惠码可用</p>-->
          <p>{{ $t('message.noDiscountsCanUser') }}</p>
        </div>
      </div>
		</div>
		<div class="order-total-bottom">
			<div class="order-total-label order-total-label-payment">
				{{$t('message.sum')}}：
			</div>
			<div class="order-total-amount">
				<!--{{ finallyPay }}-->
        {{ payVal }}
      </div>
		</div>
	</div>
</template>

<script>
import VRadio from '@/components/base/VRadio'
export default {
  name: 'VPay',
  components: {
    VRadio
  },
  props: {
    // 初始价格
    pay: {
      type: [String, Number],
      default: 0
    },
    // 优惠价格
    markdowns: {
      type: [String, Number],
      default: 0
    },
    // 判断是全额购买还是分期购买 1为全额 2为分期
    switchBuyType: {
      type: [String, Number],
      default: 1
    }
  },
  data () {
    return {
      markdown: '0.00',
      show: false,
      showInput: false,
      // tips: this.$t('message.canNoUsePromotionCode'),
      code: '',
      // showTips: false,
      price: 0,
//      discounts: [{coupon_code: '不使用优惠', id: '1'}],
      discounts: [{coupon_code: this.$t('message.noUserDiscounts'), id: '1'}],
      isHasDiscounts: 0 // 没有优惠券1， 有优惠券 2
    }
  },
  computed: {
    goodsId () {
      return this.$route.query.goodsId
    },
    versionId () {
      return this.$route.query.versionId
    },
    colorId () {
      return this.$route.query.colorId
    },
    /*finallyPay () {
      var n
      if (typeof (this.pay) === 'string' && this.pay.indexOf(',') > -1) {
        n = this.pay.replace(',', '')
      } else {
        n = this.pay
      }
      if (parseFloat(this.markdown) > parseFloat(n) || parseFloat(this.markdown) === parseFloat(n)) {
        return '1.00'
      }
      if (this.$route.name === 'buy') {
        if (this.price) {
          return (parseFloat(n) - this.price).toFixed(2)
        } else {
          return parseFloat(n).toFixed(2)
        }
      } else {
        return (parseFloat(n) - this.markdowns).toFixed(2)
      }
    },*/
    payVal () {
      if (typeof (this.pay) === 'string') {
        return this.pay
      } else {
        return parseFloat(this.pay).toFixed(2)
      }
    }
  },
  watch: {
    /*code () {
     if (this.code === '') {
     this.markdown = 0
     this.price = 0
     this.showTips = false
     this.$emit('dataSend', this.code)
     }
     }*/
    isHasDiscounts (val) {
      this.$emit('userDiscountState', val)
    },
    switchBuyType (val) {
      if (val === 1) {
        this.isHasDiscounts = 1
      } else {
        this.discounts = [{coupon_code: this.$t('message.noUserDiscounts'), id: '1'}]
        this.getCouponLis()
      }
    },
    markdowns (val) {
      this.markdown = val
    }
  },
  methods: {
    getChooseRadio (val) {
      this.$emit('dataSend', val)
    },
    showInput2 () {
      if (this.$route.name === 'buy') {
        if (this.showInput) {
          this.showInput = false
        } else {
          this.showInput = true
        }
      }
    },
    // 获取优惠码列表
    getCouponLis () {
      this.$ajax.userGetCoupon({
        goods_id: this.goodsId,
        yjsx_id: this.versionId,
        sxzh_id: this.colorId
      }).then(res => {
        if (res.code === 200) {
          if (res.data.length === 0) {
            this.isHasDiscounts = 1
          } else {
            this.isHasDiscounts = 2
            res.data.forEach(item => {
              this.discounts.unshift(item)
            })
          }
        } else if (res.code === 301) {
          this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
        }
      })
    }
    /*check () {
      if (this.code) {
        this.$ajax.checkPromotionCode(this.code).then(res => {
          if (res.code === 205) {
            this.showTips = true
            this.price = 0
            this.$emit('dataSend', '')
            this.markdown = 0
            this.tips = this.$t('message.promotionCodeUsed')
          } else if (res.code === 204) {
            this.showTips = true
            this.markdown = 0
            this.$emit('dataSend', '')
            this.tips = this.$t('message.promotionCodeOverTime')
            this.price = 0
          } else if (res.code === 200) {
            this.showTips = true
            this.tips = this.$t('message.canUsePromotionCode')
            this.price = parseFloat(res.data.price)
            var n
            if (typeof (this.pay) === 'string' && this.pay.indexOf(',') > -1) {
              n = this.pay.replace(',', '')
            } else {
              n = this.pay
            }
            if (this.price > parseFloat(n) || this.price === parseFloat(n)) {
              this.price = parseFloat(n) - 1
            }
            this.$emit('dataSend', this.code)
            this.markdown = res.data.price
          } else {
            this.showTips = true
            this.price = 0
            this.markdown = 0
            this.$emit('dataSend', '')
            this.tips = this.$t('message.canNoUsePromotionCode')
          }
        })
      }
    }*/
  },
  mounted () {
    this.markdown = this.markdowns
    if (this.switchBuyType === 1) {
      this.isHasDiscounts = 1
    } else {
      this.getCouponLis()
    }
  }
}
</script>

<style scoped>
/*.clear {
  content: '';
  display: block;
  height: 1px;
  clear: both;
}*/
/*.tips {
  float: left;
  margin-left: 150px;
  padding-left: 22px;
  margin-top: 12px;
  color: #FF600A;
  font-size: 14px;
  background: url('../../assets/images/icon_errorTips.png') no-repeat 2px;
}*/
.radio-wrap {
  padding-left: 130px;
}
.tip-wrap {
  padding-left: 130px;
  text-align: left;
  color: #A5A5A5;
}
input {
  width: 170px;
  height: 34px;
  line-height: 34px;
  padding: 0 10px;
  border: 1px solid #d7d7d7;
  box-sizing: border-box;
  font-size: 14px;
  color: #333;
  border-radius: 0px;
}
/*.getBtn {
  cursor: pointer;
  font-size: 12px;
  height: 35px;
  line-height: 35px;
  background-color: #FF600A;
  color: #fff;
  display: inline-block;
  padding: 0 28px;
  margin-left: -5px;
  margin-top: -2px;
}
.getBtn:hover {
  background-color: #ff3c00;
}*/
.v-pay {
	width: 400px;
	line-height: 20px;
	font-size: 14px;
	color: #333;
	text-align: right;
}

.v-pay .order-total-top {
  padding-bottom: 24px;
  border-bottom: 1px solid #e6e6e6;
}

.v-pay .order-total-label {
  float: left;
  width: 185px;
  height: 20px;
}

.v-pay .order-total-price {
  float: left;
  width: 215px;
  height: 20px;
}

.order-total-top .order-total-top-total {
  overflow: hidden;
}

.order-total-top .order-total-top-freight {
  overflow: hidden;
  margin-top: 24px;
}

.v-pay .order-total-bottom {
  margin-top: 24px;
  overflow: hidden;
}

.order-total-bottom .order-total-label-payment {
  margin-top: 5px;
}

.order-total-bottom .order-total-amount {
  float: left;
  width: 215px;
  height: 28px;
  line-height: 28px;
  font-size: 20px;
  color: #ff600a;
}
.icon-arrow-down {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid #333;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  transition: all .3s;
  margin-bottom: 1px;
  /*transform: rotate(180deg);*/
}
.hover {
  transform: rotate(180deg);
}

.promotion-code {
  cursor: pointer;
}
</style>
